<%--
  User: WGSpring
  Date: 2018/9/27
  Time: 16:29
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<link href="../../css/timeline.css" rel="stylesheet" type="text/css"/>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/modernizr.js"></script>
<script type="text/javascript" src="../../js/myTimeConvert.js"></script>

<script>
    $(function () {
        //timeLine
        //on scolling, show/animate timeline blocks when enter the viewport
        var cd_timeline = $("#cd-timeline");
        var lastLoadTime = 0;               //上一次加载的时间
        var nowTime = new Date().getTime(); //现在的时间
        var maxOnceLenth = 6;                //一次加载图片的最大数目
        var show_timeline_block = function () {
            //动态出现图片集合
            $('.cd-timeline-block').each(function () {
                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img')) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                }
            });
            //当以显示的高度+400预加载长度>已下载的高度，赶紧异步添加新的内容
            if (cd_timeline.scrollTop() + cd_timeline.outerHeight() + 400 > cd_timeline[0].scrollHeight) {
                //异步获取新内容
                //已加载的最晚时间
                var lastTime = $(".long_time").last().text();
                //未加载的情况，时间设为now
                if (lastTime === "") {
                    lastTime = nowTime;
                }
                //禁止重复加载相同的
                if (lastTime === lastLoadTime) {
                    return;
                }
                //非重复，加载
                lastLoadTime = lastTime;
                console.log("lastLoadTime:" + lastLoadTime);
                //加上等待显示
                var loadingDiv = '    <div class="loadingDiv" style="width: 100%;text-align: center">\n' +
                    '        <img style="width: 20px" src="${pageContext.request.contextPath}/img/loading.gif">\n' +
                    '    </div>';
                cd_timeline.append(loadingDiv);
                //开始请求新的照片
                $.ajax("${pageContext.request.contextPath}/getPhotographs", {
                    type: "POST",
                    data: {"lastTime": lastLoadTime},
                    success: function (response) {
                        //删除等待
                        cd_timeline.children(".loadingDiv").remove();
                        if (response.length > 0) {
                            var div = '<div class="cd-timeline-block">\n' +
                                '        <div class="cd-timeline-img cd-picture">\n' +
                                '            <img src="../../img/cd-icon-picture.svg" alt="Picture">\n' +
                                '        </div><!-- cd-timeline-img -->\n' +
                                '\n' +
                                '        <div class="cd-timeline-content">\n';
                            for (var i = 0; i < response.length && i < maxOnceLenth; i++) {
                                console.log("time " + i + ":" + response[i].time);
                                div = div + '            <img src="${pageContext.request.contextPath}/uploads/pic/' + response[i].url + '">\n';
                            }
                            div = div +
                                '            <div class="long_time" style="height:10px;visibility: hidden">' + response[response.length - 1].time + '</div>' +
                                '            <a href="${pageContext.request.contextPath}/details/'+lastLoadTime+'" class="cd-read-more">查看全部</a>\n' +
                                '            <span class="cd-date">' + timeFormat(response[response.length - 1].time) + '</span>\n' +
                                '        </div> <!-- cd-timeline-content -->\n' +
                                '    </div>';
                            cd_timeline.append(div);
                        }
                        //绘制时间轴
                        var line = "<style>#cd-timeline::before{height:" + cd_timeline[0].scrollHeight + "}</style>";
                        cd_timeline.append(line);
                        cd_timeline.append(line);
                    }
                });

            }
        };
        $(window).on('scroll', show_timeline_block);
        // show_timeline_block();
        cd_timeline.on('scroll', show_timeline_block);

    });

</script>

<section id="cd-timeline" class="cd-container">
    <%--&lt;%&ndash;一个时间结点&ndash;%&gt;--%>
    <%--<div class="cd-timeline-block">--%>
    <%--<div class="cd-timeline-img cd-picture">--%>
    <%--<img src="../../img/cd-icon-picture.svg" alt="Picture">--%>
    <%--</div><!-- cd-timeline-img -->--%>

    <%--<div class="cd-timeline-content">--%>
    <%--<img src="${pageContext.request.contextPath}/uploads/pic/e0dcf419c5134b07858f891ec5bc4c71.jpg">--%>
    <%--<img src="${pageContext.request.contextPath}/uploads/pic/e0dcf419c5134b07858f891ec5bc4c71.jpg">--%>
    <%--<img src="${pageContext.request.contextPath}/uploads/pic/e0dcf419c5134b07858f891ec5bc4c71.jpg">--%>
    <%--<img src="${pageContext.request.contextPath}/uploads/pic/e0dcf419c5134b07858f891ec5bc4c71.jpg">--%>
    <%--<img src="${pageContext.request.contextPath}/uploads/pic/e0dcf419c5134b07858f891ec5bc4c71.jpg">--%>
    <%--<img src="${pageContext.request.contextPath}/uploads/pic/e0dcf419c5134b07858f891ec5bc4c71.jpg">--%>
    <%--<p></p><a href="#" class="cd-read-more">查看全部</a>--%>
    <%--<span class="cd-date">Jan 14</span>--%>
    <%--</div> <!-- cd-timeline-content -->--%>
    <%--</div> <!-- cd-timeline-block -->--%>

</section>
<!-- cd-timeline -->

